Vue.component('h-select-tree', {
  props: {
    readonly: {
      type: Boolean,
      default: function() {
        return true
      }
    },
    label: {
      type: String,
      default: function() {
        return ''
      }
    },
    value: {
      type: String,
      default: function() {
        return ''
      }
    },
    noCheckLabel: {
      type: String,
      default: function() {
        return '无'
      }
    },
    url: {
      type: String,
      required: true,
      default: function() {
        return ''
      }
    },
    valueField: {
      type: String,
      required: true
    },
    labelField: {
      type: String,
      required: true
    },
    tickStrategy: {
      type: String,
      default: function() {
        return 'strict'
      }
    },
    tickType: {
      type: String,
      default: function() {
        return 'single'
      }
    },
    color: {
      type: String,
      default: function() {
        return 'primary'
      }
    }
  },
  template: 
  '<div class="row no-wrap">'+
    '<q-input  '+
      ':readonly="readonly" '+
      'style="display:none" '+
      ':after="[{ icon: \'arrow_drop_down\'}]" '+
      'v-model="cValue"> '+
    '</q-input> '+
    '<q-input '+
      ':readonly="readonly" '+
      'class="col-12" '+
      ':after="[{ icon: \'arrow_drop_down\'}]" '+
      'v-model="cLabel"> '+
      '<q-popover  '+
        'style="min-width:300px;height:350px" '+
        'class="q-pa-md" '+
        'anchor="bottom left" '+
        'self="top left"> '+
        '<q-checkbox  '+
         ':color="cColor" '+
          'v-model="noCkeck"  '+
          'val="no"  '+
          'class="q-my-sm" '+
          ':label="cNoCheckLabel"></q-checkbox> '+
        '<q-input '+
          'v-if="isShowTree" '+
          'v-model="filter" '+
          'clearable '+
          'hide-underline '+
          ':before="[{ icon: \'search\'}]" '+
          'style="font-size: 13px;border: 1px solid #ccc; padding: 3px 6px!important; border-radius: 3px" '+
          'placeholder="过滤已加载节点" '+
        '></q-input> '+
        '<q-tree  '+
          'v-if="isShowTree" '+
          ':filter="filter" '+
          ':nodes="treeData" '+
          ':node-key="valueField" '+
          ':ticked.sync="nodeTicked" '+
          ':expanded.sync="nodeExpand" '+
          '@lazy-load="treeLazyLoad" '+
          'no-nodes-label="暂无" '+
          ':color="cColor" '+
          ':tick-strategy="cTickStrategy"></q-tree> '+
      '</q-popover> '+
    '</q-input> '+
    '</div>',
  data: function() {
    return {
      cColor: this.color,
      cValue: this.value,
      cLabel: this.label,
      cReadonly: this.readonly,
      cNoCheckLabel: this.noCheckLabel,
      cNodeKey: this.nodeKey,
      cTickStrategy: this.tickStrategy,
      cTickType: this.tickType,
      cUrl: this.url,
      // 组件内置
      filter: '',
      treeData: [],
      nodeExpand: [''],
      nodeTicked: [], // 勾选的节点
      noCkeck: [],
      isShowTree: true,
    }
  },
  watch: {
    // 监听是否勾选了 无
    noCkeck: function(noCkeck) {
      if (noCkeck[0] === 'no') {
        this.isShowTree = false
        this.nodeTicked = []
        return
      }
      this.isShowTree = true
    },
    value: function(value) {
      this.nodeTicked = [value]
    },
    nodeTicked: function(nodeTicked) {
      var currentNodeTickLabel = [], that = this
      // 设置节点只能勾选一个
      if (this.cTickType === 'single') {
        if (nodeTicked.length > 1) {
          this.nodeTicked = [nodeTicked[1]]
        }
      } 
      if (this.cTickType === 'multiple') {
        this.nodeTicked = nodeTicked
      }
      console.log(this.treeData);
      // 递归  回显值
      function getLabel(nodes) {
        that.nodeTicked.forEach(function(ticked) {
          nodes.forEach(function(node) {
            if (node[that.valueField] == ticked) {
              currentNodeTickLabel.push(node.label)
              return 
            }
            getLabel(node.children?node.children:[])
          })
        })
      }
      getLabel(this.treeData)
      this.cValue = this.nodeTicked.join(',')
      this.cLabel = currentNodeTickLabel.join(',')
      console.log(this.cValue, 'value变化');
      this.$emit('ticked', this.nodeTicked.join(','))
      // 根据勾选节点获取对应其它字段的数据
      // this.otherDataGetById(currentNodeTick)
    },
  },
  computed: {
    
  },
  mounted: function() {
    this.treeDataGet()
  },
  methods: {
    // 明细 新增 获取树节点数据
    treeDataGet: function() {
      var that = this
      axios({
        method: 'post',
        url: this.cUrl,
      })
      .then(function(data) {
        var arr = []
        data.forEach(function(item) {
          var obj = {}
          obj.label = item[that.labelField]
          obj[that.valueField] = item[that.valueField]
          if (item.hasChildren) {
            obj.children = []
            obj.lazy = true
          }
          arr.push(obj)
        })
        that.treeData = arr
      })
      .catch(function(err) {
        console.log(err)
      })
    },
    // 根据勾选节点获取对应其它字段的数据
    // otherDataGetById: function(id) {
    //   var that = this
    //   axios({
    //     method: 'post',
    //     url: '/manager/basedata/material/materialList',
    //     data: {
    //       id: id
    //     }
    //   })
    //   .then(function(data) {
    //     // console.log(data, 1111111);
    //   })
    //   .catch(function(err) {
    //     console.log(err)
    //   })
    // },
    // 节点延迟加载
    treeLazyLoad: function(parmas) {
      // const { node, key, done, fail } = parmas
      var node = parmas.node
      var key = parmas.key
      var done = parmas.done
      var fail = parmas.fail
      var that = this
      if (node.children) {
        axios({
          method: 'post',
          url: '/manager/rfq/main/getSorcingClassifyTree?'+this.valueField+'='+key,
        })
        .then(function(data) {
          var arr = []
          data.forEach(function(item) {
            var obj = {}
            obj.label = item[that.labelField]
            obj[that.valueField] = item[that.valueField]
            if (item.children) {
              obj.children = []
              obj.lazy = true
            }
            arr.push(obj)
          })
          done(arr)
        })
        .catch(function(err) {
          console.log(err)
        })
      } 
    },
  }
})